<template>
 <my-navigation-bar :my-style="style">首页</my-navigation-bar>
 <text class="icon-zuojiantou navbar" @tap="goBack" :style="flag?{marginTop: '38rpx'}:''"></text>
 <view v-if="flag">
   <view class="content-container" :style="flag?{marginTop: '180rpx'}:''">
     <view class="item-box">
       <text class="title">形成原因:</text>
       <text class="article">{{articleData[aId].cause}}</text>
     </view>
     <view class="item-box">
       <text class="title">潜在危害：</text>
       <text class="article">{{articleData[aId].potential}}</text>
     </view>
     <view class="item-box">
       <text class="title">专家建议：</text>
       <text class="article">{{articleData[aId].suggestion}}</text>
     </view>
   </view>
 </view>
  <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
  <scroll-view scroll-y="true" class="scroll-box">
    <view class="content-container" :style="flag?{marginTop: '180rpx'}:''">
      <view class="item-box">
        <text class="title">形成原因:</text>
        <text class="article">{{articleData[aId].cause}}</text>
      </view>
      <view class="item-box">
        <text class="title">潜在危害：</text>
        <text class="article">{{articleData[aId].potential}}</text>
      </view>
      <view class="item-box">
        <text class="title">专家建议：</text>
        <text class="article">{{articleData[aId].suggestion}}</text>
      </view>
    </view>
  </scroll-view>
 </view>
</template>

<script setup>
 import myNavigationBarVue from '../../components/my-navigation-bar/my-navigation-bar.vue';
 import { onShow } from '@dcloudio/uni-app'
 import {
   computed,
   ref
 } from "vue";
 import useBounceFunc from "../../hooks/bounce.js";
 const {state, moveH, startH, endH} = useBounceFunc();
 const flag = computed(() => {
   return getApp().globalData.isIphoneX;
 })
 const style = {
   textAlign: 'left',
   paddingLeft: '15%',
 }
 const aId = ref(0);
 onShow(() => {
   const pages = getCurrentPages();
   const page = pages[pages.length - 1];
   aId.value = page.options.id
 })
 const goBack = () => {
   uni.navigateBack()
 }
 const articleData = [
   {
     cause: "一侧胸锁乳突肌、斜角肌等缩短，对应另一侧胸锁乳突肌、斜角肌等被拉长，从而导致头和颈部的倾斜。",
     potential: "1、不利于颈部血液循环,影响脑供血。\n2、肩颈部肌肉痉挛，形成炎症导致疼痛。",
     suggestion: "通过训练肩胛提肌、斜方肌下束等肌肉的平衡，达到改善颈椎侧屈的不良体态。"
   },
   {
     cause: "1、长时间错误的坐姿。\n2、颈椎缺少活动。",
     potential: "1、脖子向前拉长，影响美感。\n2、颈部新陈代谢不好,脖子粗,颈椎大包隆起。\n3、改变了正常颈椎生理弯曲,导致颈椎病。\n4、肩胛提肌,斜方肌上束紧张,导致肩膀痛。\n5、头部供血不足，引起偏头痛，恶心，失眠。",
     suggestion: "通过放松头长肌、颈长肌，训练舌骨下肌、深部颈屈肌，矫正胸腰段体态等，达到改善头前伸的不良体态。"
   },
   {
     cause: "需具体观察分析",
     potential: "1、导致视力受损,如斜视、视力下降、眼睛疼痛等\n2、造成负面情绪,出现抑郁或孤独的心理情绪\n3、引起颈部其他的并发症",
     suggestion: "通过训练胸锁乳突肌、斜角肌等肌肉的平衡,达到改善头颈部旋转的不良体态"
   },
   {
     cause: "1、本质原因:背部肌肉薄弱、松弛无力,导致胸椎后突形态改变坐立姿势不正导致脊柱变形、久坐躯干前面的肌肉始终缩短,后面的肌肉持续拉长造成的不平衡等原因。\n2、后天原因:不良的生活工作姿势、不良的训练姿势、伤病因素、缺乏运动等。",
     potential: "1、影响呼吸:会压迫肺部,呼吸不流畅,氧气不足，废弃物排出受阻，积累毒素。\n2、肌肉紧张：肩部肌肉紧张，压迫颈丛和臂从神经,肩酸背痛,手臂麻痹。颈肩肌肉紧张,颈部曲度减小，僵硬，大脑供血不足。\n3、影响心脏:横膈膜处在紧张缩短的状态,压迫大动脉和腔静脉，心脏压力大。\n4、影响学习:肩胛骨前引,斜方肌和菱形肌拉长，肩胛骨不稳定，肩部活动能力下降，影响学习及日常生活。\n5、影响气质:显得没有精神、没有朝气、没精打采。",
     suggestion: "通过训练胸大肌、腹直肌、斜方肌中下等肌肉的平衡，达到解决圆肩驼背的不良体态。"
   },
   {
     cause: "1、错误坐姿、休息姿势不正确\n2、单肩背包或提物、习惯一侧用力\n3、脊柱侧弯引发等\n4、常年单项运动",
     potential: "1、影响身体的美观\n2、引起脊柱侧凸的因素\n3、身体不平衡\n4、肩部肌肉不平衡，肩颈部疼痛。",
     suggestion: "通过训练斜方肌上束、肩胛提肌、前锯肌、斜·方肌下束、下降肌等肌肉平衡，达到改善高低肩的不良体态。"
   },
   {
     cause: "1、前锯肌（将肩胛骨内侧向前拉,使其紧贴胸壁)受损，无力将肩胛骨向前拉使其紧贴胸壁。从后背看就会有很明显的肩胛骨下角翘起。\n2、胸小肌紧张造成翼状肩:此情况是最影响美观的。胸小肌紧张会使肩胛骨处于前伸、下降、下回旋,侧面观则表现为肩胛骨下角翘起的状态。",
     potential: "1、前锯肌无力,会影响肩关节的稳定性。\n2、影响人体背部的美观。\n3、产生肩部疼痛。\n4、降低肩胛骨的灵活性。",
     suggestion: "通过平衡两侧肌力，锻炼薄弱的肌耐力，适当进行等长训练，达到改善翼状肩胛的不良体态。"
   },
   {
     cause: "1、长期错误坐姿、行走姿势造成脊柱两侧肌肉不平衡，代偿引起\n2、遗传也是脊柱侧弯的一个原因。",
     potential: "1、影响心肺:由侧凸造成的胸廓变形,会使心肺功能受到挤压。比较严重的时候就会直接影响心肺系统的正常工作。特别会影响孩子的呼吸状况\n2、病情发展:脊柱侧凸如果没有及时注意调整和治疗,继续发展恶化的概率非常大,特别是在孩子8-12期间，脊柱侧凸是高峰期\n3、影响外观:直接影响孩子的身高和体态,甚至十分影响孩子的精神健康状况，孩子一定会有非常大的心理压力",
     suggestion: "因脊柱侧凸的类型以及受影响的脊柱部位各有不同，需预约专家一对一制定纠正性的训练计划。"
   }
 ]
</script>

<style lang="scss" scoped>
 .navbar {
    position: fixed;
    top: 60rpx;
    left: 30rpx;
    z-index: 100;
    font-size: 48rpx;
    font-weight: 500;
    color: #515151;
  }
  .scroll-box{
    height: 100vh;
  }
  .content-container{
    margin-top: 150rpx;
    padding: 50rpx 50rpx;
    .item-box{
      display: flex;
      flex-direction: column;
      justify-content: center;
      &:not(:first-child){
        margin-top: 50rpx;
      }
      .title{
        font-size: 35rpx;
        font-weight: 550;
      }
      .article{
        margin-top: 40rpx;
        font-size: 32rpx;
        line-height: 50rpx;
        color: #5E5E5E;
      }
    }
  }
</style>
